<template>
    <div>
        <div class="row">
            <div class="col-lg-6 item-list" v-for="(item,index) in activeList" :key="index" @click="toDetails(item)">
                <div class="back-fff">
                    <div class="title">
                        {{item.F_Description}}
                        <!-- <span class="state" :class="[item.F_Stauts==0 ? 'state2' : 'state1']">{{item.F_Stauts==0 ? '已结束' : '进行中'}}</span> -->
                    </div>
                    <div class="section">
                        <div class="flex">
                            <div class="name">参观时间</div>
                            <div class="text">{{item.F_StartTime}}~{{item.F_EndTime}}</div>
                        </div>
                        <div class="flex">
                            <div class="name">申请时间</div>
                            <div class="text">{{$ut.dateFormat(item.F_ScheduleDate)}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <BaseNull v-if="BaseNull" />
        </div>
    </div>
</template>
<script>
import { GetMyScheduleTour } from "@/api/activity";
export default {
    data() {
        return {
            form: {
                pageSizs: 10,
                pageNum: 1
            },
            userId: this.$store.state.userId,
            activeList: [],
            BaseNull:false
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            GetMyScheduleTour({
                F_UserId: this.userId
            }).then((res) => {
                this.activeList = res.data.Data || [];
                this.BaseNull = this.activeList.length === 0
            });
        },
        // 跳转
        toDetails() {
            // this.$router.push({
            //     path: "/user/admissionDeatils",
            //     query: {
            //         F_StudentPoolId: item.F_SchemeInfoId,
            //         F_EnrbatchName:item.F_Description
            //     }
            // });
        }
    }
};
</script>
<style scoped lang="scss">
.item-list {
    // cursor: pointer;
    // transition: 300ms;
    margin-bottom: 15px;
    // &:hover {
    //     opacity: 0.8;
    // }
}
.title {
    font-size: 16px;
    line-height: 50px;
    border-left: 6px solid #2d9ef3;
    padding-left: 21px;
    position: relative;
}

.state {
    position: absolute;
    right: 0;
    width: 65px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    top: 10px;
    color: #fff;
}
.state1{
    background-color: #72b622;
    color: #fff;
}
.state2{
    background-color: #AAAAAA;
}

.section {
    padding: 21px;

    .name {
        line-height: 34px;
        color: #666666;
        width: 76px;
    }

    .text {
        line-height: 34px;
        color: #000000;
    }
}
</style>